<template>
        <form class="at-form" :class="[
    labelPosition ? 'at-form--label-' + labelPosition : '',
    { 'at-form--inline': inline }
  ]">
    <slot></slot>
  </form>
</template>
<script>
/**
 *@author 陈杨
 */
    export default {
        name:'at-form',
        componentName: "AtForm",
        props:{
/**
 *@type {Object} model 表单数据对象
 */ 
            model:Object,
/**
 *@type {Object} rules 表单验证规则
 */ 
            rules:Object,
/**
 *@type {String} labelPosition 表单域标签的位置
 */ 
            labelPosition: String,
/**
 *@type {String} labelWidth 表单域标签的宽度
 */ 
            labelWidth: String,
/**
 *@type {Object} labelSuffix 表单域标签的后缀
 */ 
            labelSuffix: {
                type: String,
                default: ""
            },
/**
 *@type {Boolean} inline 行内表单模式
 */ 
            inline: Boolean,
/**
 *@type {Object} showMessage 是否显示校验错误信息
 */ 
            showMessage: {
                type: Boolean,
                default: !0
            }
        },
        watch: {
/**
 *@description 观察是否有validate
 */
            rules() {
                this.validate()
            }
        },
        data() {
            return {
                fields: []
            }
        },
        created() {
          this.$on('at.form.addField', (field) => {
            if (field) {
              this.fields.push(field);
            }
          });
          /* istanbul ignore next */
          this.$on('at.form.removeField', (field) => {
            if (field.prop) {
              this.fields.splice(this.fields.indexOf(field), 1);
            }
          });
        },

        methods: {
/**
 *@description 对表单中的每一个formitem中的组件的值进行验证，验证v-model是否绑定了值，若没有，则输出警告信息
 */
          resetFields() {
            if (!this.model) {
              process.env.NODE_ENV !== 'production' &&
              console.warn('[Atelement Warn][Form]model is required for resetFields to work.');
              return;
            }
            this.fields.forEach(field => {
              field.resetField();
            });
          },
          clearValidate() {
            this.fields.forEach(field => {
              field.clearValidate();
            });
          },
/**
 *@param {Object} callback 验证成功时调用的回调函数
 *@description 对整个表单进行验证，如果需要验证的fields为空，调用验证时立刻返回callback
 */
          validate(callback) {
            if (!this.model) {
              console.warn('[Atelement Warn][Form]model is required for validate to work!')
              return;
            }
            let valid = true;
            let count = 0;
            if (this.fields.length === 0 && callback) {
              callback(true);
            }
            this.fields.forEach((field, index) => {
              field.validate('', errors => {
                if (errors) {
                  valid = false;
                }
                if (typeof callback === 'function' && ++count === this.fields.length) {
                  callback(valid);
                }
              });
            });
          },
/**
 *@param {string} prop 验证成功时调用的回调函数
 *@param {object} cb 回调函数
 *@description 对部分表单字段进行校验
 */
          validateField(prop, cb) {
            var field = this.fields.filter(field => field.prop === prop)[0];
            if (!field) { throw new Error('must call validateField with valid prop string!'); }

            field.validate('', cb);
          }
        }
    }
</script>
